<template>
	<view>
		<com-nav-bar :fixed="true" @clickLeft="back" left-icon="back" :title="cashData.title"></com-nav-bar>
		
		<view style="padding: 20rpx;background-color: #f2f2f2">
			<u-grid :col="3">
				<u-grid-item>
					<view>{{cashData.money_total}}</view>
					<view class="grid-text">总余额</view>
				</u-grid-item>
				<u-grid-item>
					<view>{{cashData.money_frozen}}</view>
					<view class="grid-text">待结算</view>
				</u-grid-item>
				<u-grid-item>
					<view>{{cashData.money_valid}}</view>
					<view class="grid-text">可提现</view>
				</u-grid-item>
			</u-grid>
		</view>
		
		<view class="fee-desc m-top-20 font-size-9">
			<view class="title">说明</view>
			<view class="fee">
				<view class="handling-fee">
					<view class="sum" :style="{color:'#FF7104'}">
						<text v-if="cashData.service_fee_type == 1">{{cashData.service_fee_rate}}%</text>
						<text v-if="cashData.service_fee_type == 2">{{cashData.service_fee_rate}}元</text>
					</view>
					<view class="desc">手续费</view>
				</view>
			</view>
			<view style="padding: 0 40rpx 20rpx;font-size: 10pt;font-weight: 600;">{{cashData.cash_desc}}</view>
		</view>
		
		<view class="text-input-desc m-top-20">
			<view class="money">
				<view class="dot font-size-16">¥</view>
				<input class="input font-size-12" type="number" v-model="createForm.cash_price" maxlength="20"
					placeholder-style="color:#BFBFBF" :placeholder="`最高可提现${maxCashPrice}元`" />
				<view class="text font-size-9" @click="checkAll" :style="{color:'#FF7104'}">全部提现</view>
			</view>
			<view class="sum font-size-9 m-top-20">
				预计到账：
				<span class="red" :style="{color:'#FF7104'}">{{factPrice}}元</span>
			</view>
		</view>
		
		
		<view style="background-color: #fff;padding-top: 40rpx;">
			<view class="withdrawal-sure">
				<button type="default" @click='createBefore'>确认提现</button>
			</view>
			<view @click="openUrl('/pages/cash/record?cash_type='+createForm.cash_type)" style="text-align: center;margin-top: 40rpx;font-size: 10pt;color:#ff7104;text-decoration: underline;">提现记录</view>
		</view>
		
		
		<com-payment-password ref="paymentPassword" :value="createForm.passwd" :digits="6" @cancel="closePwdHandler" @checkSafePwd="complatePwdHandler"></com-payment-password>

	</view>
</template>

<script>
	let that;
	export default{
		data(){
			return {
				// allowCashTypes:[4,5],
				cashData:{
					money_total:0,
					money_frozen:0,
					money_valid:0,
					service_fee_type:1,
					service_fee_rate:8,
					title:'',
					desc:'',
				},
				createForm:{
					cash_type:'',
					cash_price:'',
					passwd:''
				},
			}
		},
		beforeCreate(){
			that = this;
		},
		onLoad(opt){
			this.createForm.cash_type = opt.cash_type ?? '';
			this.getCashData()
		},
		computed:{
			maxCashPrice(){
				return this.cashData.money_valid > 20000 ? 20000 : this.cashData.money_valid
			},
			factPrice(){
				let price = '?';
				if( this.createForm.cash_price > 0 ){
					if(this.cashData.service_fee_type == 1){
						price = parseFloat(this.createForm.cash_price * (100 - this.cashData.service_fee_rate) / 100).toFixed(2)
					}else{
						price = parseFloat(this.createForm.cash_price - this.cashData.service_fee_rate).toFixed(2)
					}
				}
				return price;
			}
		},
		methods:{
			back(){
				this.navBack()
			},
			async getCashData(){
			
				let res = await this.$http.request({
					url: this.$api.cash.preview,
					method: 'POST',
					data: {cash_type:this.createForm.cash_type},
					showLoading: true
				});
				if(res.code !== 0){
					setTimeout(function(){
						that.navBack()
					},3000)
					return this.$http.toast(res.msg);
				}
				this.cashData = res.data;
			},
			checkAll(){
				this.createForm.cash_price = this.maxCashPrice;
			},
			async createBefore(){
				if(this.createForm.cash_price < 10){
					return that.$http.toast('提现金额不能低于10元');
				}
				if(this.createForm.cash_price > 20000){
					return that.$http.toast('提现金额不能超过20000');
				}
				if(this.createForm.cash_price > this.cashData.money_valid){
					return that.$http.toast('可提现余额不足~');
				}
				let res = await this.$http.request({
					url:this.$api.hxt.hxtAccountInfo,
					method:'POST',
					showLoading:true
				});
				if(res.code !== 0 || res.data.hxt_status !== 1){
					uni.showModal({
						title:'温馨提示',
						content:'您的恒信通账户还未激活，请先激活账户再进行提现。是否立即前往？',
						confirmText:'前往激活',
						cancelText:'稍后前往',
						success(res){
							if (res.confirm) {
								uni.navigateTo({url:'/pages/hxt/account'});
							} 
						}
					})
					return ;
				}
				
				if (this.cashData.passwd_status == 0) {
					uni.showModal({
						title:'温馨提示',
						content:'您还没有设置支付密码,请先设置支付密码，是否前往？',
						confirmText:'立即前往',
						cancelText:'稍后前往',
						success(res){
							if (res.confirm) {
								uni.navigateTo({url:'/pages/user/payment/password'});
							} 
						}
					})
					return ;
				} else {
					// 调用弹出函数
					this.$refs.paymentPassword.modalFun('show');
				}
			},
			closePwdHandler(){
				this.createForm.passwd = '';
			},
			async complatePwdHandler(e){
				this.createForm.passwd = e.passwork;
				this.$refs.paymentPassword.modalFun('hide');
				let res = await this.$http.request({
					url: this.$api.cash.create,
					method: 'POST',
					data: this.createForm,
					showLoading: true
				});
				if(res.code !== 0){
					return this.$http.toast(res.msg);
				}
				this.$http.toast('申请提现成功');
				setTimeout(function() {
					uni.navigateTo({url: '/pages/cash/record?cash_type='+that.createForm.cash_type})
				}, 1500)
			},
			openUrl(url) {
				uni.navigateTo({url})
			},
		
		
		}
	}
</script>

<style lang="scss">
	
	.text-input-desc,
	.fee-desc,
	.withdraw-type {
		background-color: #ffffff;
	}
	
	.text-input-desc {
		padding: 20rpx 30rpx;
		display: flex;
		flex-direction: column;
	
		.money {
			display: flex;
			align-items: center;
			padding: 30rpx 0;
			border-bottom: 1rpx solid #f2f2f2;
	
			.dot {
				margin-right: 20rpx;
				font-weight: 600;
			}
	
			.input {
				flex: 1;
				border-bottom: 0;
			}
	
			.text {
				color: #bc0100;
				font-weight: 600;
			}
		}
	
		.sum {
			color: #333333;
	
			.red {
				color: #bc0100;
			}
		}
	}
	
	.fee-desc {
		.fee {
			display: flex;
			padding: 10rpx 0;
	
			.handling-fee,
			.labor-service-fee {
				height: 170rpx;
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
	
			.sum,
			.desc {
				line-height: 40rpx;
			}
	
			.sum {
				color: #bc0100;
				font-weight: 600;
				font-size: 11pt;
				margin-bottom: 8rpx;
			}
		}
	}
	
	.title {
		padding: 0 30rpx;
		line-height: 60rpx;
		border-bottom: 1rpx solid #f2f2f2;
	}
	
	
	.withdrawal-sure {
		width: 80%;
		height: 80rpx;
		background:#FF7104;
		margin: 0 auto;
		border-radius: 10rpx;
	}
	
	.withdrawal-sure button {
		width: 100%;
		height: 100%;
		outline: none;
		border: none;
		background:#FF7104;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
	}
	
	
</style>